<template>
  <div id="listImgString" class="img-box">
    <div class="img-inner-box">
      <el-image
        fit="contain"
        :src="showImgList.showImg"
        :preview-src-list="showImgList.imgAry"
      >
      </el-image>
    </div>
    <span class="num" v-if="showNum">{{ showImgList.num }}</span>
  </div>
</template>

<script>
export default {
  name: 'listImgString',
  msg: '列表中的视图内容-返回值为字符串结构',
  props: {
    imgInfo: {
      type: String,
      default: function() {
        return ''
      }
    },
    showNum: {
      type: Boolean,
      default: function() {
        return true
      }
    }
  },
  computed: {
    showImgList() {
      if (!this.imgInfo) {
        return { ...this.defaultObj }
      }
      let imgAry = this.imgInfo.split(',')
      return {
        imgAry,
        showImg: imgAry[0] + '?x-oss-process=style/400x400lb',
        num: imgAry.length
      }
    }
  },
  data() {
    return {
      defaultObj: {
        imgAry: [],
        showImg: '',
        num: 0
      }
    }
  },
  mounted() {},
  methods: {}
}
</script>
